<template>
    <page-container>
        <cu-custom slot="header" :isBack="true" bgColor="bg-white">
            <block slot="content">账户通知</block>
        </cu-custom>
        <view slot="center" class="message-center">
            <mescroll ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                <block v-for="(item,inx) in getaccountList" :key="inx">
                    <view class="message-item">
                        <view class="msg-time">{{item.format_time}}</view>
                        <view class="msg-info">
                            <view class="msg-title">{{item.content}}</view>
                            <view class="msg-text">{{item.remark}}</view>
                        </view>
                    </view>
                    <view style="height: 30rpx;"></view>
                </block>
            </mescroll>
        </view>
    </page-container>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			page: 1,
			getaccountList: [],
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			}

		}
	},
	created() {
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			this.getaccount(page.num, 10)
		},
		getaccount(page, page_size) {
			this.$request.getaccount({
				page,
				page_size
			}).then(res => {
				console.log('getaccount', res)
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length > 0) {
					if (page == 1) {
						this.getaccountList = res.data.list
						this.page = 1
					} else {
						this.getaccountList = this.getaccountList.concat(res.data.list)
						this.page = page
					}
				}
			}).catch(() => {
				this.mescroll.endErr()
			})
		}
	},
	mounted() { }
}
</script>

<style lang="scss" scoped>
.message-center {
    width: 100%;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    .message-item {
        width: 96%;
        margin: 0 auto;

        .msg-time {
            text-align: center;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            padding-bottom: 16rpx;
        }

        .msg-info {
            width: 702rpx;
            height: auto;
            background: #ffffff;
            border-radius: 16rpx;
            margin: 0 auto;
            padding: 30rpx;

            .msg-title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 800;
                color: #222222;
            }

            .msg-text {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #000000;
                padding-top: 30rpx;
            }
        }
    }
}
</style>
